/* 适用于登陆页面的样式 */

.login-container {
    width: 100%;
    height: calc(100% - 50px);
    /* background-color: #666; */

    /* 开启弹性布局 */
    display: flex;
    /* 开启弹性布局之后，居中都是上面的元素相比较于这个 打底的层  也就是容器这一层*/
    /* 水平居中 */
    justify-content: center;
    /* 垂直方向上居中 */
    align-items: center;
}

.login-dialog {
    width: 350px;
    height: 300px;

    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 6px;
}


.login-dialog h3 {
    text-align: center;
    padding: 30px;
}

.login-dialog .row {
    /* 此时开启弹性布局，.row是打底层，上面显示的文字是可以被设置成居中的 */
    display: flex;
    /* 水平 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;

    height: 50px;
}

.login-dialog .row span {
    /* 设置宽度可以让文字对齐 */
    width: 80px;
}


/* 注意并集选择器中 两者之间是有 逗号， 的 */
#userName , #password {
    width: 180px;
    height: 38px;

    /* 去掉边框 */
    border: none;

    /* 加入圆角 */
    border-radius: 5px;

    /* 放大字体 */
    font-size: 18px;

    /* 输入框内容离左边框有点距离 */
    padding-left: 7px;
}

#submit {
    /* 80px + 180px  为了能够对齐 */
    width: 260px;
    height: 38px;

    padding: 10px;
    /* 去掉边框 */
    border: none;

    /* 加入圆角 */
    border-radius: 5px;

    background-color: orange;

    /* 文字变成白色 */
    color: white;

}

/* 伪类选择器 ： 选中某一种状态*/
#submit:active {
    background-color: #666;
    /* color: black; */
}